<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Random Pokémon Generator - Quickly Customize and Generate Pokémon</title>
        <meta name="description" content="Instantly create custom Pokémon sets with our fast and easy-to-use generator. Quickly customize by generation, type, color, and more. Perfect for trainers, game developers, and Pokémon fans looking for rapid inspiration.">
        <meta name="keywords" content="pokemon generator, random pokemon, quick pokemon generator, custom pokemon creator, instant pokemon randomizer">
        <meta property="og:locale" content="en_US"/>
        <meta property="og:type" content="website"/>
        <meta property="og:title" content="Random Pokémon Generator - Quickly Customize and Generate Pokémon"/>
        <meta property="og:description" content="Instantly create custom Pokémon sets with our fast and easy-to-use generator. Quickly customize by generation, type, color, and more. Perfect for trainers, game developers, and Pokémon fans looking for rapid inspiration."/>
        <meta property="og:url" content="https://pokemongenerator.xyz/"/>
        <meta property="og:image" content="/static/image.png">
        <meta property="og:site_name" content="Random Pokémon Generator"/>
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="Random Pokémon Generator - Quickly Customize and Generate Pokémon">
        <meta name="twitter:description" content="Instantly create custom Pokémon sets with our fast and easy-to-use generator. Try it now!">
        <meta name="twitter:image" content="https://pokemongenerator.xyz/static/image.png">
        <meta name="msvalidate.01" content="B362957FC36C5EDDD6079B6D78330424" />
        <link rel="canonical" href="https://pokemongenerator.xyz/"/>
        <link rel="icon" href="static/image.png" sizes="32x32"/>
        <link rel="stylesheet" href="static/base.css?version=0.0.15">
        <script type="application/javascript" src="static/base.js?ver=0.0.6"></script>
        <script type="application/javascript" src="static/data.js"></script>
        <!-- Google tag (gtag.js) -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-47TE63PW8V"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-47TE63PW8V');
        </script>
        <style>
            :root {
                --primary-color: #4a90e2;
                --secondary-color: #8D0B7C;
                --text-color: #333;
                --menu-text-color: #000000;
                --background-color: #ffffff;
                --header-background: #ffffff;
                --header-border-color: #e0e0e0;
            }
            
            body {
                font-family: 'Arial', sans-serif;
                background-color: var(--background-color);
                color: var(--text-color);
                margin: 0;
                padding: 0;
            }
            
            header {
                background-color: var(--header-background);
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                padding: 10px 0;
                border-bottom: 1px solid var(--header-border-color);
            }
            
            .container {
                max-width: 1200px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
            }
            
            .logo-container {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            
            .logo {
                width: 40px;
                height: 40px;
                cursor: pointer;
                transition: transform 0.3s ease;
            }
            
            .logo:hover {
                transform: scale(1.1);
            }
            
            .logo-text {
                color: var(--text-color);
                font-weight: bold;
                font-size: 1em; /* 调小了logo文本的大小 */
            }
            
            nav ul {
                list-style-type: none;
                display: flex;
                gap: 20px;
                margin: 0;
                padding: 0;
            }
            
            nav a {
                text-decoration: none;
                color: var(--menu-text-color);
                font-weight: 500;
                transition: color 0.3s ease;
            }
            
            nav a:hover {
                color: #8D0B7C !important; /* 紫色，使用 !important 确保优先级 */
                text-decoration: underline !important;
            }
            
            .user-info {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            
            .user-info img {
                border-radius: 50%;
                width: 30px;
                height: 30px;
                border: 2px solid var(--primary-color);
            }
            
            #login-button {
                background-color: var(--primary-color);
                color: white;
                padding: 8px 16px;
                border-radius: 20px;
                cursor: pointer;
                transition: background-color 0.3s ease;
            }
            
            #login-button:hover {
                background-color: var(--secondary-color);
            }

            main {
                padding-top: 20px;
            }
            
            /* 添加以下新样式 */
            .menu-icon {
                display: none;
                font-size: 28px;
                cursor: pointer;
                color: rgb(92, 92, 96);
            }
            
            @media screen and (max-width: 768px) {
                .menu-icon {
                    display: block;
                }
                
                nav ul {
                    display: none;
                    position: absolute;
                    top: 60px;
                    left: 0;
                    width: 100%;
                    background-color: var(--header-background);
                    flex-direction: column;
                    padding: 10px 0;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                }
                
                nav ul.show {
                    display: flex;
                }
                
                nav ul li {
                    padding: 10px 20px;
                }
                
                nav a {
                    color: #000000; /* 确保移动端下拉菜单中的链接为黑色 */
                }
                
                nav a:hover {
                    color: #8D0B7C !important; /* 紫色，使用 !important 确保优先级 */
                    text-decoration: underline !important;
                }
            }
            
            /* 添加全局链接样式 */
            a {
                text-decoration: none;
                color: inherit;
                transition: color 0.3s ease, text-decoration 0.3s ease;
            }
            
            a:hover {
                color: #8D0B7C !important; /* 紫色，使用 !important 确保优先级 */
                text-decoration: underline !important;
            }

            /* 新增的样式 */
            .team-building-section {
                margin-top: 40px;
                margin-bottom: 40px;
            }

            .team-building-tips {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 20px;
                margin-top: 20px;
            }

            .tip {
                background-color: #f9f9f9;
                border-radius: 8px;
                padding: 20px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            }

            .tip h3 {
                color: var(--text-color);
                margin-top: 0;
                font-size: 1.1em;
                font-weight: bold;
            }

            .tip p {
                color: var(--text-color);
                font-size: 0.95em;
                line-height: 1.5;
            }

            .team-building-example {
                background-color: #f0f0f0;
                border-radius: 8px;
                padding: 25px;
                margin-top: 30px;
            }

            .team-building-example h3 {
                color: var(--text-color);
                font-size: 1.2em;
                margin-bottom: 15px;
                font-weight: bold;
            }

            .team-building-example p, .team-building-example li {
                color: var(--text-color);
                line-height: 1.5;
            }

            .team-building-example ol {
                padding-left: 20px;
            }

            .team-building-example li {
                margin-bottom: 10px;
            }
        </style>
        
    </head>
<body>
    <header>
        <div class="container">
            <div class="logo-container">
                <img src="static/image.png" alt="Random Pokémon Generator Logo" class="logo" onclick="window.location.href='/'">
                <span class="logo-text">Random Pokémon Generator</span>
            </div>
            <nav>
                <div class="hamburger-menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <ul id="menu">
                    <li><a href="/">Home</a></li>
                    <li><a href="/name-generator">Name Generator</a></li>
                    <li><a href="/type-generator">Type Generator</a></li>
                    <li><a href="/guess-game">Pokémon Guess Game</a></li>
                </ul>
            </nav>
            <div style="display: none">
                <div id="login-button">Login</div>
                <div id="user-info" class="user-info"></div>
            </div>
        </div>
    </header>

    <script>
        function toggleMenu() {
            const menu = document.getElementById('menu');
            menu.classList.toggle('show');
        }
    </script>
<main>
    <div class="section-container">
        <div class="generator-container">
            <h1>Random Pokémon Generator</h1>
            <p>Quickly customize and generate Pokémon with just a click! Tailor your selection by generation, type, color, and more. Instantly discover new favorites or create the perfect team for your next adventure. Our fast and flexible tool is perfect for trainers, game developers, and Pokémon enthusiasts looking for rapid inspiration.</p>
            <div class="options">
                <div class="option">
                    <label for="generation">Generation:</label>
                    <select id="generation">
                        <!-- Generation options will be dynamically populated -->
                    </select>
                </div>
                <div class="option">
                    <label for="type">Type:</label>
                    <select id="type">
                        <!-- Type options will be dynamically populated -->
                    </select>
                </div>
                <div class="option">
                    <label for="color">Color:</label>
                    <select id="color">
                        <!-- Color options will be dynamically populated -->
                    </select>
                </div>
                <div class="option">
                    <label for="legendary">Legendary:</label>
                    <select id="legendary">
                        <option value="yes" selected="true">Yes</option>
                        <option value="no">No</option>
                    </select>
                </div>
                <div class="option">
                    <label for="count">Count:</label>
                    <select id="count">
                        <option value="1">1</option>
                        <option value="3" selected="true">3</option>
                        <option value="6">6</option>
                        <option value="12">12</option>
                    </select>
                </div>
            </div>
            <button id="generateButton" onclick="generatePokemon()">Generate Pokémon</button>
            <div id="pokemonDisplay"></div>
        </div>
    </div>

    <div class="section-container features-section">
        <h2>Features of Random Pokémon Generator</h2>
        <div class="features-grid">
            <div class="feature-card">
                <i class="fas fa-globe"></i>
                <h3>Multi-Generation Support</h3>
                <p>Explore Pokémon from all generations or focus on your favorites. Our database covers from the classic Red & Blue all the way to the latest releases.</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-filter"></i>
                <h3>Advanced Filtering</h3>
                <p>Customize your search with multiple filters including type, color, and legendary status. Find exactly the Pokémon you're looking for!</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-bolt"></i>
                <h3>Instant Results</h3>
                <p>Generate your Pokémon with a single click. Our fast algorithm ensures you get your results immediately, complete with high-quality sprite images.</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-users"></i>
                <h3>Team Building</h3>
                <p>Generate up to 12 Pokémon at once, perfect for creating balanced teams or filling out your Pokédex. Great for both casual players and competitive strategists.</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-book"></i>
                <h3>Educational Tool</h3>
                <p>Learn about different Pokémon species, their types, and characteristics. An excellent resource for expanding your Pokémon knowledge.</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-sync-alt"></i>
                <h3>Regular Updates</h3>
                <p>Our database is regularly updated to include new Pokémon as they're released, ensuring you always have access to the latest species.</p>
            </div>
            <!-- In the features-section, add these new feature cards -->
            <div class="feature-card">
                <i class="fas fa-random"></i>
                <h3>Quick Randomization</h3>
                <p>Generate a completely random set of Pokémon with a single click, perfect for those who want instant inspiration or a surprise team.</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-mobile-alt"></i>
                <h3>Mobile-Friendly Design</h3>
                <p>Use our generator on-the-go! Our responsive design ensures a smooth experience on smartphones and tablets, allowing you to create teams anywhere, anytime.</p>
            </div>
        </div>
    </div>

    <div class="section-container team-building-section">
        <h2>Building Your Pokémon Team</h2>
        <p>Our Random Pokémon Generator is an excellent tool for creating diverse and balanced Pokémon teams. Here's how you can use it effectively:</p>
        
        <div class="team-building-tips">
            <div class="tip">
                <h3>1. Diverse Type Coverage</h3>
                <p>Use the type filter to ensure your team has a variety of Pokémon types. This helps you cover more weaknesses and have answers to different threats.</p>
            </div>
            <div class="tip">
                <h3>2. Balance Legendaries and Regular Pokémon</h3>
                <p>Mix legendary and non-legendary Pokémon for a well-rounded team. Use our legendary filter to control their inclusion.</p>
            </div>
            <div class="tip">
                <h3>3. Consider Team Roles</h3>
                <p>Generate multiple sets and think about different roles: attackers, defenders, support. Our generator can help you discover unexpected candidates for each role.</p>
            </div>
            <div class="tip">
                <h3>4. Cross-Generational Teams</h3>
                <p>Experiment with Pokémon from different generations to create unique team compositions and strategies.</p>
            </div>
            <div class="tip">
                <h3>5. Theme Teams</h3>
                <p>Use our color filter to create visually cohesive teams or challenge yourself with single-type teams using the type filter.</p>
            </div>
            <div class="tip">
                <h3>6. Discover New Favorites</h3>
                <p>Don't be afraid to include Pokémon you're unfamiliar with. Our generator might introduce you to your new favorite team member!</p>
            </div>
        </div>
        
        <div class="team-building-example">
            <h3>Example: Building a Balanced Team</h3>
            <p>Let's use our generator to build a sample team:</p>
            <ol>
                <li>Generate two Pokémon without any filters for a random base.</li>
                <li>Use the type filter to add a Water-type and a Fire-type for elemental balance.</li>
                <li>Add one Legendary Pokémon using the legendary filter.</li>
                <li>Finally, use the generation filter to add a Pokémon from the latest generation for some modern flair.</li>
            </ol>
            <p>This approach ensures a mix of types, power levels, and generational representation in your team!</p>
        </div>
    </div>

    <div class="section-container">
        <h2>Frequently Asked Questions</h2>
        <div class="faq" onclick="toggleAnswer(this)">
            <div class="question">How does the Random Pokémon Generator work?</div>
            <div class="icon">▼</div>
        </div>
        <div class="answer">Our generator uses a comprehensive database of Pokémon to randomly select species based on your chosen criteria. It then displays the corresponding sprite images for each selected Pokémon.</div>

        <div class="faq" onclick="toggleAnswer(this)">
            <div class="question">Can I get shiny Pokémon from this generator?</div>
            <div class="icon">▼</div>
        </div>
        <div class="answer">Currently, our generator displays standard Pokémon sprites. We're considering adding a shiny option in future updates!</div>

        <div class="faq" onclick="toggleAnswer(this)">
            <div class="question">Are all Pokémon from every generation included?</div>
            <div class="icon">▼</div>
        </div>
        <div class="answer">Yes, our database includes Pokémon from all generations up to the latest release. You can use the generation filter to focus on specific eras.</div>

        <div class="faq" onclick="toggleAnswer(this)">
            <div class="question">How often is the Pokémon database updated?</div>
            <div class="icon">▼</div>
        </div>
        <div class="answer">We strive to update our database as soon as new Pokémon are officially released. This ensures you always have access to the latest species in your random generations.</div>
        <!-- In the FAQ section, add these new questions and answers -->
        <div class="faq" onclick="toggleAnswer(this)">
            <div class="question">Can I save or share the Pokémon teams I generate?</div>
            <div class="icon">▼</div>
        </div>
        <div class="answer">Currently, the generator doesn't have a built-in save or share feature. However, you can easily take a screenshot of your generated team to save or share with friends. We're considering adding more sharing options in future updates!</div>

        <div class="faq" onclick="toggleAnswer(this)">
            <div class="question">How quickly can I generate a new set of Pokémon?</div>
            <div class="icon">▼</div>
        </div>
        <div class="answer">Our generator is designed for speed! You can generate a new set of Pokémon instantly with just one click. Whether you're looking for a single Pokémon or a full team of 12, results appear in less than a second.</div>

        <div class="faq" onclick="toggleAnswer(this)">
            <div class="question">Can I exclude certain types or generations from my random selections?</div>
            <div class="icon">▼</div>
        </div>
        <div class="answer">Yes! Our advanced filtering options allow you to customize your random selections. You can choose specific generations, types, colors, and even exclude legendary Pokémon if you wish. This gives you full control over your randomization process while still keeping it quick and easy.</div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            populateDropdown('generation', GenerationData);
            populateDropdown('type', TypeData);
            populateDropdown('color', ColorData);

            // 添加移动端菜单切换功能
            const hamburgerMenu = document.querySelector('.hamburger-menu');
            const menu = document.getElementById('menu');

            if (hamburgerMenu) {
                hamburgerMenu.addEventListener('click', function() {
                    this.classList.toggle('active');
                    menu.classList.toggle('active');
                });
            }

            // 点击菜单项后关闭菜单
            menu.addEventListener('click', function(e) {
                if (e.target.tagName === 'A' && window.innerWidth <= 768) {
                    hamburgerMenu.classList.remove('active');
                    menu.classList.remove('active');
                }
            });

            // 点击页面其他地方关闭菜单
            document.addEventListener('click', function(e) {
                if (window.innerWidth <= 768 && !menu.contains(e.target) && !hamburgerMenu.contains(e.target)) {
                    hamburgerMenu.classList.remove('active');
                    menu.classList.remove('active');
                }
            });

            // 窗口大小改变时处理菜单显示
            window.addEventListener('resize', function() {
                if (window.innerWidth > 768) {
                    menu.classList.remove('active');
                    hamburgerMenu.classList.remove('active');
                }
            });
        });

        function populateDropdown(id, data) {
            const select = document.getElementById(id);
            data.forEach(item => {
                const option = document.createElement('option');
                option.value = item.value;
                option.textContent = item.label;
                select.appendChild(option);
            });
        }

        function generatePokemon() {
            const count = parseInt(document.getElementById('count').value);
            const generation = document.getElementById('generation').value;
            const type = document.getElementById('type').value;
            const color = document.getElementById('color').value;
            const legendary = document.getElementById('legendary').value;

            // Filter PokemonData based on selected criteria
            let filteredPokemon = Object.entries(PokemonData).filter(([id, pokemon]) => {
                return (generation === '10' || pokemon.generation === parseInt(generation)) &&
                       (type === '19' || pokemon.type.includes(parseInt(type))) &&
                       (color === '11' || pokemon.color === parseInt(color)) ;
            });

            // Randomly select 'count' number of Pokémon from filtered list
            let selectedPokemon = [];
            for (let i = 0; i < count && filteredPokemon.length > 0; i++) {
                const randomIndex = Math.floor(Math.random() * filteredPokemon.length);
                selectedPokemon.push(filteredPokemon[randomIndex][0]);
                filteredPokemon.splice(randomIndex, 1);
            }

            const displayArea = document.getElementById('pokemonDisplay');
            displayArea.innerHTML = '';

            selectedPokemon.forEach(id => {
                const img = document.createElement('img');
                img.src = `static/pokemon/${id.padStart(3, '0')}.webp`;
                img.alt = `${PokemonData[id].name}`;
                img.className = 'pokemon-image';
                img.style.width = '180px';
                img.style.height = '180px';
                const nameElement = document.createElement('div');
                nameElement.textContent = PokemonData[id].name;
                nameElement.className = 'pokemon-name';
                const container = document.createElement('div');
                container.className = 'pokemon-container';
                container.appendChild(img);
                container.appendChild(nameElement);
                displayArea.appendChild(container);
            });
        }

        function toggleAnswer(element) {
            const answer = element.nextElementSibling;
            answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
            element.querySelector('.icon').textContent = answer.style.display === 'block' ? '▲' : '▼';
        }
    </script>
</main>

<footer class="site-footer">
    <div class="container">
        <div class="footer-links">
            <a href="https://github.com/lipengxs/PokemonGenerator.git" target="_blank" rel="noopener noreferrer">Github</a>
            <a href="/privacy-policy">Privacy Policy</a>
            <a href="/terms-of-use">Terms of Use</a>
        </div>
        <p>&copy; 2024 <strong>Random Pokemon Generator</strong>. All rights reserved.</p>
    </div>
</footer>
</body>
</html>
